<template>
		<div class="exchange-box" v-if="exchangeShow" @tap="close">
			<image class="mask-image" src="@/static/img/liyangbeijing.png" mode="aspectFill" style="z-index: 9998;" v-show="getShow && bcode == ''"></image>
			<!-- 兑换框 -->
			<div style="display: flex;flex-direction: column;width: 100%;position: relative;z-index: 9999;" v-show="!getShow" @tap.stop="open()">
				<div class="info-box">
					<image src="@/static/img/exchangeImage.png" mode="aspectFill" class="top-img"></image>
					<image src="@/static/img/close.png" mode="aspectFill" class="close-img" @tap.stop="close"></image>
					<span class="exchange-title">兑换码</span>
					<div class="left"></div>
					<div class="right"></div>
					<div class="input-border">
						<input type="text" placeholder="请输入" v-model="inputCode" placeholder-class="place-class" style="width: 100%;background-color: #000;padding: 3.73vw 0;border-radius: 9.07vw;text-align: center;font-weight: 300;
				color: #FFCE80;">
						<div class="border"></div>
						<div class="exchange-btn" @tap.stop="onExchange">立即兑换</div>
					</div>
				</div>
				<div class="exchange-tips" @tap="toReal" v-if="user.myInfo.user.isReal == 0">
					<div class="center">
						<image src="@/static/img/aboutMe.png" mode="aspectFill" class="image427"></image>
						<span class="tips-text">使用兑换码前需完成实名认证</span>
					</div>
					<div class="center">
						<span class="tips-text">前往认证</span>
						<image src="@/static/img/enterDetailTwo.png" mode="aspectFill" class="image427"></image>
					</div>
				</div>
			</div>
			<!-- 兑换成功 -->
			<div class="modal-mask" v-if="getShow && bcode == ''">
				<block v-if="exchangeDetail">
					<div class="mask-box">
						<image :src="exchangeDetail.spu.cover || ''" mode="aspectFill" style="width: 70.13vw;height: 70.13vw;border-radius: 6.4vw;"></image>
						<div class="num-box">
							<image src="../../static/img/num.png" mode="aspectFill" style="width: 8.8vw;height: 4.27vw;"></image>
							<span class="num-text">{{ Number(exchangeDetail.collection.nftItemId) + Number(1) || ''}}/{{ exchangeDetail.spu.nftMaxSupply || ''}}</span>
						</div>
						<div class="maskInfo-box">
							<div class="left-border"></div>
							<div class="right-border"></div>
							<div style="display: flex;"> 
								<span class="line"></span>
								<div class="twoInfo-box">
									<span class="info-title">{{ exchangeDetail.spu.spuTitle || '' }}</span>
									<div style="display: flex;flex-wrap: nowrap;" v-if="exchangeDetail.spu.tags">
										<div class="info-border" v-for="item in exchangeDetail.spu.tags.split(',')">{{ item }}</div>
									</div>
								</div>
							</div>
							<div class="border" style="margin-top: 6.4vw;"></div>
							<div class="get-btn" @tap.stop="confirm(exchangeDetail.collection.collectionId,exchangeDetail.spu.spuId)">
								兑换成功，立即收取
							</div>
							<span class="back-text" @tap.stop="close">返回</span>
						</div>
					</div>
				</block>
			</div>
			
			<!-- 兑换失败 -->
			<div class="exchangeFail-box" v-else-if="bcode != ''">
				<image src="@/static/img/close.png" mode="aspectFill" class="close-img"></image>
				<span class="fail-title">很抱歉</span>
				<span class="fail-text">{{ errMsg }}</span>
				<span class="fail-btn">我知道了</span>
			</div>
		</div>
	
</template>

<script>
	export default{
		data(){
			
			return{
				exchangeShow: false,
				getShow: false,
				inputCode: '',
				exchangeDetail: {},
				bcode: '',
				errMsg: ''
			}
		},
		methods: {
			open(){
				this.exchangeShow = true;
			},
			close(){
				this.getShow = false;
				this.exchangeShow = false;
				this.inputCode = '';
				this.bcode = '';
				this.exchangeDetail = {};
			},
			onExchange(){
				if(this.user.myInfo.user.isReal == 0){
					this.$ma.route.realName();
					return;
				};
				let id = {
					id: this.inputCode
				}
				this.$u.api.onProductRedeem({},this.inputCode).then(res=>{
					console.log(res);
					this.exchangeDetail = res;
				}).catch(err=>{
					console.log(err)
					this.errMsg = err.msg;
					if(err.bcode == 'A0402' || err.data == null) return this.bcode = err.bcode;
				})
				this.getShow = true;
			},
			toReal(){
				this.$ma.route.realName();
			},
			confirm(collectionId,spuId){
				this.getShow = false;
				this.exchangeShow = false;
				this.inputCode = '';
				this.bcode = '';
				this.exchangeDetail = {};
				this.$ma.route.detail({
					collectionId: collectionId,
					detailType: 'my',
					spuId: spuId
				})
			}
		}
	}
</script>

<style lang="scss">
	.close-img {
		width: 6.4vw;
		height: 6.4vw;
		position: absolute;
		top: 4.27vw;
		right: 4.27vw;
	}
	
	.border {
		margin-top: 4.27vw;
		background: linear-gradient(to left,
				transparent 0%,
				transparent 50%,
				#000 50%,
				#000 100%);
		background-size: 18px 1px;
		background-repeat: repeat-x;
		width: 100%;
		height: 1px;
	
	}
	
	.image427 {
		width: 4.27vw;
		height: 4.27vw;
	}

	.exchange-box {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 999;
		padding: 0 8.53vw;
		display: flex;
		align-items: center;

		.info-box {
			padding: 6.4vw;
			padding-top: 8.53vw;
			background-color: #1b1b1b;
			border-radius: 6.4vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			position: relative;
			
			.left{
				width: 4.27vw;
				height: 4.27vw;
				border-radius: 50%;
				position: absolute;
				top: 60.53vw;
				left: -2.13vw;
				background-color: #000;
			}
			.right{
				width: 4.27vw;
				height: 4.27vw;
				border-radius: 50%;
				position: absolute;
				background-color: #000;
				top: 60.53vw;
				right: -2.13vw;
			}

			// justify-content: ;
			.exchange-title {
				font-size: 3.73vw;
				font-weight: 500;
				color: #fff;
				margin-top: 2.13vw;
				margin-bottom: 8.53vw;
			}

			.top-img {
				width: 21.33vw;
				height: 21.33vw;
			}
		}

		.place-class {
			color: #555;
			font-weight: 300;
			font-size: 3.73vw;
		}

		.input-border {
			width: 100%;
			height: 100%;
			position: relative;
		}

		

		.exchange-btn {
			margin-top: 4.27vw;
			width: 100%;
			line-height: 12.8vw;
			border-radius: 6.4vw;
			background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
			box-shadow: 0vw 3vw 5vw rgba(71, 12, 114, 0.4800);
			font-size: 3.73vw;
			font-weight: 500;
			color: #000;
			text-align: center;
		}
		
		.exchange-tips{
			padding: 3.2vw 4.27vw;
			background-color: #493622;
			border-radius: 5.33vw;
			margin-top: 4.27vw;
			display: flex;
			justify-content: space-between;
			.center{
				display: flex;
				align-items: center;
			}
			.tips-text{
				font-size: 3.2vw;
				font-weight: 300;
				color: #ff9e3e;
			}
		}
	}
	@keyframes big{
		0%{
			transform: scale(0.3);
		}
		100%{
			transform: scale(1);
		}
	}
	.modal-mask{
		animation: big 1.5s;
		z-index: 9999;
		
		.mask-box{
			padding: 6.4vw;
			border-radius: 6.4vw;
			background-color: #1b1b1b;
			position: relative;
			width: 82.93vw;
			.num-box{
				display: inline-flex;
				align-items: center;
				background-color: #323232;
				border-radius: 1.07vw;
				position: absolute;
				left: 10.67vw;
				top: 68vw;
				.num{
					padding: 0vw 1.07vw 0 1.07vw;
					background: linear-gradient(270deg, #FFCE80 0%, #A972FF 100%);
					border-radius: 1.07vw;
					font-size: 3.47vw;
					font-weight: blod;
				}
				.num-text{
					font-size: 2.67vw;
					font-weight: 300;
					color: #FFCE80;
					padding: 0.27vw 1.07vw;
				}
			}
		}
		.maskInfo-box{
			background-color: #1b1b1b;
			display: flex;
			flex-direction: column;
			margin-top: 4.27vw;
			.left-border{
				width: 4.27vw;
				height: 4.27vw;
				border-radius: 50%;
				position: absolute;
				top: 98.2vw;
				left: -2.13vw;
				background-color: #000;
			}
			.right-border{
				width: 4.27vw;
				height: 4.27vw;
				border-radius: 50%;
				position: absolute;
				top: 98.2vw;
				right: -2.13vw;
				background-color: #000;
			}
			.line{
				width: 1.07vw;
				height: 11.2vw;
				display: block;
				background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
				margin-right: 2.13vw;
				border-radius: 12.8vw;
			}
			.info-title{
				font-size: 4.27vw;
				font-weight: 500;
				color: #fff;
				width: 64.8vw;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.twoInfo-box{
				display: flex;
				flex-direction: column;
			}
			.info-border{
				margin-top: 1.07vw;
				border: 1px solid #A972FF;
				padding: 0.27vw 1.07vw;
				font-size: 2.67vw;
				font-weight: 300;
				color: #A972FF;
				border-radius: 1.07vw;
				margin-right: 1.07vw;
			}
			.get-btn{
				// margin: 4.27vw 0;
				margin-top: 6.4vw;
				width: 100%;
				line-height: 12.8vw;
				box-shadow: 0vw 3vw 5vw rgba(71,12,114,0.4800);
				background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
				text-align: center;
				border-radius: 6.4vw;
				font-size: 3.73vw;
				font-weight: 500;
				color: #000000;
			}
			.back-text{
				margin-top: 3.2vw;
				color: #555555;
				font-size: 3.2vw;
				font-weight: 300;
				text-align: center;
			}
		}
	}
	.mask-image {
		will-change: transform;
		position: fixed;
		top: 0;
		left: -50%;
		height: 100%;
		width: 200%;
		z-index: 1000;
		background: transparent;
		animation: box-ani 40s  infinite linear;
	}
	@keyframes box-ani {
	    from {transform: rotate(0)}
	    to {transform: rotate(360deg)}
	 }
	 .exchangeFail-box{
		 padding: 6.4vw;
		 padding-top: 10.67vw;
		 background-color: #1b1b1b;
		 position: relative;
		 border-radius: 6.4vw;
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 align-items: center;
		 width: 100%;
		 .fail-title{
			 font-size: 6.4vw;
			 font-weight: 500;
			 color: #fff;
		 }
		 .fail-text{
			 font-size: 3.73vw;
			 font-weight: 300;
			 color: #aaa;
			 margin-top: 2.13vw;
		 }
		 .fail-btn{
			 width: 100%;
			 line-height: 11.73vw;
			 text-align: center;
			 background-color: #000;
			 font-weight: 300;
			 font-weight: 3.73vw;
			 color: #555;
			 margin-top: 6.4vw;
			 border-radius: 6.4vw;
		 }
	 }
</style>
